<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">核销打卡</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<view class="work_dingdan_fu" v-for="item in productList">
				<view class="work_top_yi"><view class="big">{{item.job_day}}</view><view class="zhong">日</view>{{item.job_date}}</view>
				<view class="work_dingdan" v-for="item2 in item.data" :data-id="item2.id">
					<view class="dingdan_list">
						<view class="list_top">
							<view class="name">{{item2.type_text}}</view>
							<view class="luyong">已录用<view class="te">{{item2.confirm}}</view>人</view>
						</view>
						<view class="dingdan_time">
							<view class="time_left"><image :src="URL+'/JD_wx_img/xinxi_img01.png'" mode="widthFix"></image>{{item2.arrival}}</view>
						</view>
						<view class="hexiao_bottom">
							<view class="shichang" @tap="toTiaozheng" :data-id="item2.id">调整工作时长</view>
							<view class="wangong" @tap="toQuerenwangong" :data-id="item2.id">确认完工</view>
							<view class="daogang" @tap="toQuerendaogang" :data-id="item2.id">确认到岗</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载效果 -->
			<view class='loading_text' :hidden="noMre">没有更多了</view>
			<view class="loading_text" :hidden="loading">加载中...</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				touHeight: 0,
				pageTop: 0,
				//域名拼接
				URL: app.globalData.URL,
				noMre: true,
				loading: false,
				//用于渲染页面的数组
				productList: [],
				//默认页数
				page: 1,
				//每页展示条数
				list_rows: 7,
			}
		},
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			
			that.id = options.id;//酒店id
			//默认加载数据
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			var id = that.id;//酒店id
			that.getproinfo(page,list_rows,id,that)
		},
		
		/**
		* 页面上拉触底事件的处理函数
		*/
		onReachBottom(){
			var that = this;
			//触底加载数据
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			var id = that.id;//id
			page++;
			that.page = page//打印page
			var page = that.page//触底后的页数触底一次+1
			that.getproinfo(page,list_rows,id,that)
		},
		
		methods: {
			
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//跳转到调整工作时长
			toTiaozheng:function(e){
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
				    url: '../yanchang_shichang/yanchang_shichang?id='+id,
				});
			},
			
			//跳转到确认到岗
			toQuerendaogang:function(e){
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
				    url: '../queren_daogang/queren_daogang?id='+id,
				});
			},
			
			//跳转到确认完工
			toQuerenwangong:function(e){
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
				    url: '../queding_wangong/queding_wangong?id='+id,
				});
			},
			
			//用工列表函数封装
			getproinfo(page,list_rows,id,that){
				var that = this;
			    uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/clock?id='+id,
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					data:{
						page: page,
						list_rows: list_rows,
					},
					success: function (res) {
						var productList = that.productList;
						///没有数据的时候
						if(res.data.data.data.length < 5){
							that.noMre = false
							that.loading = true
						}else{
							that.noMre = true
							that.loading = false
						}
						//有数据的时候循环将结果集追加到数组后面
						for (var i = 0; i < res.data.data.data.length; i++) {
							productList.push(res.data.data.data[i]);
						}
						that.productList = productList
					},
					fail: function (res) {
					  console.log(res);
					},
				});
			}
		}
	}
</script>

<style>
	.page_content{
		padding-bottom: 60rpx;
	}
	.dingdan_list{
		padding: 0px;
		border-bottom: 2rpx solid #eee;
	}
	.work_top_yi{
		color: #888888;
		font-size: 20rpx;
		margin-bottom: 10rpx;
	}
	.work_top_yi .big{
		font-weight: 900;
		font-size: 56rpx;
		color: #333333;
		display: inline-block;
	}
	.work_top_yi .zhong{
		font-size: 28rpx;
		display: inline-block;
		margin-right: 16rpx;
		margin-left: 5rpx;
	}
	.work_dingdan{
		margin-top: 0rpx;
		margin-bottom: 30rpx;
	}
	.work_dingdan_fu{
		margin-top: 30rpx;
	}
	.dingdan_list .list_top .luyong{
		float: right;
		color: #888888;
		font-size: 20rpx;
	}
	.dingdan_list .list_top .luyong .te{
		display: inline-block;
		color: #E85426;
		font-weight: 900;
		margin: 0px 5rpx;
	}
	.hexiao_bottom{
		overflow: hidden;
		padding: 20rpx 30rpx 30rpx 30rpx;
		border-top: 2rpx solid #eee;
		margin-top: 30rpx;
	}
	.hexiao_bottom .shichang{
		float: left;
		width: 180rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #ddd;
		border-radius: 6rpx;
		color: #3079DC;
		font-size: 24rpx;
	}
	.hexiao_bottom .daogang{
		float: right;
		width: 136rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 6rpx;
		color: #fff;
		font-size: 24rpx;
		background: #3079DC;
	}
	.hexiao_bottom .wangong{
		float: right;
		width: 136rpx;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 6rpx;
		color: #fff;
		font-size: 24rpx;
		background: #19C769;
		margin-left: 16rpx;
	}
	.dingdan_list .list_top{
		padding: 30rpx;
		padding-bottom: 15rpx;
	}
	.dingdan_time{
		padding: 0px 30rpx;
		margin-top: 0px;
	}
</style>
